背景
移动端浏览器在一个通常比屏幕更宽的虚拟“窗口”（Viewport）中渲染页面，从而无需将所有页面都压缩进小屏幕里（那样会把很多没有针对移动端进行优化的站点打乱）。用户可以通过平移和缩放来浏览页面的不同区域。
Mobile Safari 引入了”viewport元标签“来让web开发者控制视口的尺寸及比例。如今许多其他移动端浏览器已经支持这一标签，虽然它不是任何web标准的一部分。
以一代 iPhone 下的 Safari 来说就是：
在 iPhone 的 320px 物理屏幕上——视觉窗口（visual viewport），创建出了一个 980px的虚拟窗口——布局窗口（layout viewport），在视觉窗口（visual viewport）中我们可以拖动横向竖向滑动条或者放大缩小网页，来达到最佳的浏览效果(类似桌面浏览器)；而布局窗口（layout viewport）用来配合 CSS 渲染布局，例如当我们设置一个容器的宽度为 100% 时，这个容器的实际值为 980px 而不是 320px。如此一来大部分网页就能以缩放的形式正常的显示在手机屏幕上了。
基础属性
viewport 全部属性&值如下：
- width: viewport宽度
- height: viewport高度
- initial-scale: 初始缩放比例
- maximum-scale: 最大缩放比例
- minimum-scale: 最小缩放比例
- user-scalable: 是否允许用户缩放
最基本的一个设置大概是这样的1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
配合css media query
关于viewport主要是在做一个页面的响应式时发现当我设置为：
@media only screen and (max-width: 769px){}模拟iphone并不会渲染这部分的样式，最后发现页面没有设置viewpoint的宽度，所以iphone的默认宽度是在980，所以留个记录~